<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素案例</title>
    <style>
        /*    1.
        .ipt {
            width: 200px;
            height: 20px;
            color: #ccc;
            outline: none;
        }
        
        .focus {
            border: 1px solid pink;
            color: #333;
        } */
        /*  2.
        .box1 {
            position: relative;
            width: 1000px;
            height: 50px;
            border: 1px solid #333;
            margin: 0 auto;
        }
        
        .jpg1 {
            width: 600px;
            height: 100%;
            margin-left: 20px;
        }
        
        .pic {
            position: absolute;
            top: 0px;
            right: -21px;
            width: 20px;
            height: 20px;
        } */
    </style>
</head>

<body>
    <!-- 1.表单焦点获取 -->
    <!--  <input type="text" value="邮箱/手机号" class="ipt">
    <script>
        //获取元素
        var txt = document.querySelector('input');
        //当表单获得焦点
        txt.onfocus = function() {
            if (this.value == '邮箱/手机号') {
                this.value = '';
            }
            txt.className = 'ipt focus';
        }
        //当表单失去焦点
        txt.onblur = function() {
            if (txt.value == '') {
                txt.value = '邮箱/手机号';
            }
            txt.className = 'ipt';
        }
    </script> -->

    <!-- 2.关闭广告 -->
    <!--  <div class="box1">
        <img src="../images/1.jpg" alt="" class="jpg1">
        <img src="../images/pic1.jpg" alt="" class="pic">
    </div>
    <script>
        //获取元素
        var pic = document.querySelector('.pic');
        var div = document.querySelector('.box1');
        //当图标被点击 广告隐藏
        pic.onclick = function() {
            div.style.display = 'none';
        }
    </script> -->

    <select name="下拉" id="Menu">
        <option value="菜单1">菜单一号</option>
        <option value="菜单2">菜单二号</option>
        <option value="菜单3">菜单三号</option>
    </select>
    <script>
        var menu = document.getElementById('Menu');
        menu.onmousemove = function() {
            menu.option.display = block;
        }
    </script>
</body>

</html>